{% extends './layout.html'%} {%block main%}
<style>
	h6 {
		margin-bottom: 5px;
	}
	
	i.qrcode {
		cursor: pointer;
	}
	
	#qrcode {
		text-align: center;
		padding: 20px 40px;
		display: none;
	}
	
	#qrcode p {
		padding-top: 30px;
	}
	
	.spinner {
		font-size: 20px;
		width: 8em;
		height: 8em;
		border-radius: 50%;
		box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
		margin: 0 auto;
	}
	
	.spinner .outer {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	
	.inner {
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		line-height: 8em;
	}
	
	.spinner i {
		position: absolute;
		clip: rect(0, 8em, 8em, 4em);
		width: 8em;
		height: 8em;
		animation: spinner-circle-clipper 1s ease-in-out infinite;
	}
	
	@keyframes spinner-circle-clipper {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(180deg);
		}
	}
	
	.spinner i:after {
		position: absolute;
		clip: rect(0, 8em, 8em, 4em);
		width: 8em;
		height: 8em;
		content: '';
		animation: spinner-circle 1s ease-in-out infinite;
		border-radius: 50%;
		box-shadow: inset 0 0 0 .1em #3aa8ed;
	}
	
	@keyframes spinner-circle {
		0% {
			transform: rotate(-180deg);
		}
		100% {
			transform: rotate(180deg);
		}
	}
	.explorer b{
		float: right;
	}
</style>

<div class="layui-row" id='app'>
	<div class="layui-col-lg3 _panel" style="padding: 10px;">

		<table class="layui-table" lay-skin="no" style="margin: 0;">

			<tr>
				<td align="center">
					安全指数
				</td>
			</tr>
			<tr>
				<td align="">
					<div class="spinner"><i></i>
						<div class="outer"><b class="inner">100%</b></div>

					</div>
				</td>
			</tr>
		</table>
		<table class="layui-table explorer" lay-skin="line" style="margin: 0;border-top: 0;" class=''>
			<tr>
				<td>
					状态
					<b style='font-weight: normal;'>
						<a href="javascript:;" class="layui-btn layui-btn-mini layui-btn-radius ">正常</a>
					</b>
				</td>
			</tr>
			<tr>
				<td>
					可用余额
					<b v-html='isLock ? "***" : money'>
						
					</b>
				</td>
			</tr>
			<tr>
				<td >
					备付金阈值
					<b v-html='isLock ? "***" : limit_money'>
						
					</b>
				</td>
			</tr>
			<tr>
				<td>
					可用备付金
					<b v-html='isLock ? "***" : money - limit_money'>
						
					</b>
				</td>
			</tr>
			<tr>
				<td align="center">
					<a class='layui-btn layui-btn-radius layui-btn-normal' href="javascript:;" v-if='!isLock' v-on:click='isLock = !isLock'>隐藏数据</a>
					<a class='layui-btn layui-btn-radius layui-btn-danger' href="javascript:;" v-if='isLock' v-on:click='isLock = !isLock'>解锁数据</a>
				</td>
			</tr>

		</table>

	</div>
	<div class="layui-col-lg8 _panel" style='padding: 10px;'>

		<div style=" ; padding: 15px;">
			<h2>当期</h2>

			<table class="layui-table">
				<tr>
					<td colspan="2"><b>50元面值</b></td>
					<td colspan="2"><b>100元面值</b></td>

				</tr>
				<tr>
					<td>买单（件）</td>
					<td width="30%" v-html='isLock ? "***" : dangqi.maidan50'>0</td>
					<td>买单（件）</td>
					<td width="30%" v-html='isLock ? "***" : dangqi.maidan100'>0</td>
				</tr>
				<tr>
					<td>买双（件）</td>
					<td width="30%" v-html='isLock ? "***" : dangqi.maishuang50'>0</td>
					<td>买双（件）</td>
					<td width="30%" v-html='isLock ? "***" : dangqi.maishuang100'>0</td>
				</tr>
				<tr>
					<td>总量（件）</td>
					<td width="30%" v-html='isLock ? "***" : dangqi.total50'>0</td>
					<td>总量（件）</td>
					<td width="30%" v-html='isLock ? "***" : dangqi.total100'>0</td>
				</tr>
				<!--<tr>
					<td>
						代付备付金（元）
					</td>
					<td colspan="3" v-html='isLock ? "***" : dangqi.daifu'>
						0
					</td>
				</tr>-->
			</table>
		</div>

		<div style="padding: 15px;margin-top:15px;">
			<h2>今日</h2>
			<table class="layui-table">
				<tr>
					<td colspan="2"><b>50元面值</b></td>
					<td colspan="2"><b>100元面值</b></td>

				</tr>
				<tr>
					<td>买单（件）</td>
					<td width="30%" v-html='isLock ? "***" : today.maidan50'>0</td>
					<td>买单（件）</td>
					<td width="30%" v-html='isLock ? "***" : today.maidan100'>0</td>
				</tr>
				<tr>
					<td>买双（件）</td>
					<td width="30%" v-html='isLock ? "***" : today.maishuang50'>0</td>
					<td>买双（件）</td>
					<td width="30%" v-html='isLock ? "***" : today.maishuang100'>0</td>
				</tr>
				<tr>
					<td>总量（件）</td>
					<td width="30%" v-html='isLock ? "***" : today.total50'>0</td>
					<td>总量（件）</td>
					<td width="30%" v-html='isLock ? "***" : today.total100'>0</td>
				</tr>
				<!--<tr>
					<td>
						代付备付金（元）
					</td>
					<td colspan="3" v-html='isLock ? "***" : today.daifu'>
						0
					</td>
				</tr>-->
			</table>
		</div>
	</div>
</div>

{%endblock%} {%block js%}

<script>
	var app = new Vue({
		el : "#app",
		data : {
			isLock : true,

			dangqi : {
				maidan50 : '{{ret[0][0].single}}',
				maidan100 : '{{ret[0][1].single}}',
				maishuang50 : '{{ret[0][0].double}}',
				maishuang100 : '{{ret[0][1].double}}',
				total50 : '{{ret[0][0].zong}}',
				total100 : '{{ret[0][1].zong}}',
				daifu : 0
			},
			today : {
				maidan50 : '{{ret[1][0].single}}',
				maidan100 : '{{ret[1][1].single}}',
				maishuang50 : '{{ret[1][0].double}}',
				maishuang100 : '{{ret[1][1].double}}',
				total50 : '{{ret[1][0].zong}}',
				total100 : '{{ret[1][1].zong}}',
				daifu : 0
			},
			money : '{{info.money}}',
			limit_money : '{{info.limit_money}}',

			
		}
	})
</script>

{%endblock%}